<style lang="less" scoped>
    .pro-box{
        width: 100%;
        height: 100%;
        background: #f0f0f0;
        .pro-box_banner{
            width: 100%;
            height: 251px;
            background: #e5e5e5;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            position: relative;
            border-bottom: 1px solid #e5e5e5;
            .sw-btn{
                position: absolute;
                width: 100px;
                height: 40px;
                left: 50%;
                bottom: 0px;
                margin-left: -50px;
                z-index: 20;
                display: flex;
                justify-content: space-around;
                align-items: center;
                >span{
                    display: inline-block;
                    flex: 1;
                    width: 48px;
                    height: 23px;
                    line-height: 23px;
                    font-size: 10px;
                    border-radius: 20px;
                    text-align: center;
                    margin-right: 5px;
                    background: #fff;
                    color: #333
                        
                }
                >span.current{
                    background: #7A1634;
                    color: #fff
                }
                
                

            }
            .branner-video{
                background-color:#fff;
                display:flex;
                align-items:center;
                justify-content:space-between;
                width:100%;
                margin-right:0;
                -webkit-transition:all 0.4s;
                transition:all 0.4s;
                -webkit-transform:translateX(0px);
                transform:translateX(0px);
                .video{
                    width: 100%;
                    height: 100%;
                }

            }
            .branner-img{
                background-color:#e51c23;
                width:100%;
                display:flex;
                flex-direction:column;
                align-items:center;
                justify-content:center;
                color:gray;
                -webkit-transform:translateX(100%);
                transform:translateX(100%);
                -webkit-transition:all 0.4s;
                transition:all 0.4s;
                margin-left: -100%

            }
        }

        .pro-box_desc{
            width: 100%;
            height: 91px;
            display: flex;
            box-sizing: border-box;
            padding: 13px 15px;
            background: #fff;
            margin-bottom: 10px;
            .desc-info{
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                .desc-info_price{
                     color: #7A1634;
                     margin-bottom: 18rpx;   
                     
                }
                .ot-color{
                    color: #797979;
                }
            }
            .share{
                width: 30px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-direction: column;
                >img{
                    width: 22px;
                    height: 32px;
                }
                >span{
                    color: #8E8E8E;
                    font-size: 12px;
                }
            }
        }
        .pro-box_detail{
            margin-top: 10px;
            padding: 13px 15px;
            background: #fff;
            box-sizing: border-box;
            .detail-tit{
                font-size: 14px;
            }
        }
        .cell{
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #fff;
            color: #333;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            padding: 0 0 0 15px;
            border-bottom: 1px solid #e5e5e5;
            .cell-info{
                flex: 1;
                color: #666;
            }
            .icon{
                display: inline-block;
                margin-top: 15px;
                width: 25px;
                height: 25px;
            }
            
            .cellIcon{
                width: 30px;
                height: 30px;
                display: block;
            }
        }
        .pro-footer{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 51px;
            display: flex;
            >span{
                flex: 1;
                line-height: 51px;
                color: #fff;
                outline: none;
                border: none;
                font-size: 14px;
                text-align: center;
                display: inline-block;
            }
            >span.pro-add{
                background: #383B44;
            }
            >span.pro-shop{
                background: #7A1634;    
            }
            .pro-back_bBtn{
                width: 75px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: #fff;
                >img{
                    width: 35px;
                    height: 35px;
                    display: inline-block;
                }
                >font{
                    color: #fff;
                    display: inline-block;
                    padding: 2px 5px;
                    font-size: 8px;
                    border-radius: 3px;
                    margin-top: 3px;
                    background: #C3C3C3;

                }
            }
        }
        .touch-move-active .branner-video, .touch-move-active .branner-img {
            
             -webkit-transform: translateX(0);
             transform: translateX(0);
        }
        .surDetail{
            padding: 50px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center
        }
        .video-host-wrapper{
            width: 100%;
            height: 100%;
            position: relative;
            .sw-img{
                width: 100%;
                height: 100%;
            }
            .swPlay{
                width: 62px;
                height: 62px;
                display: block;
                position: absolute;
                left: 50%;
                margin-left: -31px;
                top: 50%;
                margin-top: -32px;
            }

        }
        .sw-btn_i{
            width: 48px;
            height: 23px;
        }
        
    }
</style>

<template>
    <div class="pro-box">
        
        <div class="pro-box_banner"  
            :class="{'touch-move-active':isTouchMove}"
            >
            <div class="branner-video">
                <swiper @change="bindchange" style='width:100%;height:100%' :current="currentPage">
                    <div v-for="(item,index) in imgUrls " :key="index">
                        <swiper-item >
                            <img  v-if="item.type == 1" :src="item.url"  class="slide-image"  style='width:100%;height:100%'/>
                            <template v-if="item.type == 2">
                                <template v-if="isPlay">
                                    <video  class="video" bindpause="bindpauseVideo" style='width:100%;height:100%' id="myVideo" :src="item.url" binderror="videoErrorCallback"  controls></video>
                                </template>
                                <template v-else>
                                    <div class="video-host-wrapper">
                                        <img class="sw-img" :src="imgUrls[0].url" mode='aspectFill' />
                                        <img  class="swPlay" :src="playIcon" @click="playVideo"/>
                                    </div>
                                </template>
                            </template>
                        </swiper-item>
                    </div>
                </swiper>
            </div>
           
            <div class="sw-btn">
                <img class="sw-btn_i" :src="!isTouchMove?img_1:img_2"  @click="showVideo(1)"/>
                <img class="sw-btn_i" :src="isTouchMove?video_1:video_2" @click="showVideo(2)"/>
            </div>
        </div>
        <div class="pro-box_desc">
            <div class="desc-info">
                <p class="desc-info_price ">
                    <span class="text-13">￥</span>
                    <span class="text-20">9999</span>
                </p>
                <p class="text-16">披风式西装外套</p>
                <p class="text-12 ot-color">销量: 0</p>
            </div>
            <div class="share">
                <img :src="shareIcon"/>
                <!-- <span>分享</span> -->
            </div>
        </div>
        <div class="cell" @click="showShopFn">
            <div class="cell-info text-14 ">选择商品型号</div>
            <img  class="icon" :src="deo"/>
        </div>
        <div class="pro-box_detail" >
            <p class="detail-tit">商品详情</p>
            <div class="surDetail">
                <img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>
            </div>
        </div>
        <div class="pro-footer">
            <div class="pro-back_bBtn" @click="goIndex">
                <img :src="backIcon"/>
            </div>
            <span class="pro-add" @click="showShopFn">加入购物车</span>
            <span class="pro-shop" @click="goOrder">立即购买</span>
        </div>
        <buy-shop v-if="shopShow" @buy="buy" @shopcar="shopcar"></buy-shop>
    </div>
</template>
<script>
import cellItem from '@/components/cellItem/index.vue'
import buyShop from '@/components/buy-shop/index.vue'
import deo from '@/assets/images/deo.png'
import playIcon from '@/assets/images/pro/playIcon.png'

import video_1 from '@/assets/images/pro/video_1.png'
import video_2 from '@/assets/images/pro/video_2.png'
import img_1 from '@/assets/images/pro/img_1.png'
import img_2 from '@/assets/images/pro/img_2.png'

import backIcon from '@/assets/images/pro/back.png'
import shareIcon from '@/assets/images/pro/share.png'
export default {
    title: '商品详情',
    data(){
        return {
            video_1: video_1,
            video_2: video_2,
            shareIcon:shareIcon,
            backIcon:backIcon,
            img_1: img_1,
            img_2: img_2,
            shopShow: false,
            cellIcon:'',
            deo:deo,
            playIcon:playIcon,
            cellInfo:'选择商品型号',
            isTouchMove:false,
            startX: 0, //开始坐标
            startY: 0,
            swiperX:0,
            swiperY:0,
            isPlay:false,
            currentPage:0,
            imgUrls: [
                {
                    type:1,
                   url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

                },{
                    type:1,
                   url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

                },
                {
                    type:2,
                    url:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
                }
                
               
                
            ]
        }
    },
    created(){
        this.myVideo =  wx.createVideoContext('myVideo')
        console.log(this.myVideo)
    },
    bindpauseVideo(){
console.log(444)
    },

    methods:{
       
        playVideo(){
            this.isPlay = true;
            let myVideo =  wx.createVideoContext('myVideo')
            myVideo.play();
        },
        showVideo(num){
            
            this.isTouchMove = num == 1 ? false: true
            console.log(this.isTouchMove)
            this.currentPage = num == 1 ? 0 :this.imgUrls.length - 1 
        },
        // 滑动swiper 记录当前值
        swiperTouchstart(e) {
            this.swiperX = e.clientX
            this.swiperY = e.clientY
        },
        swiperTouchmove(e){
            var that = this,
            startSwiperX = that.swiperX,//开始X坐标
            startSwiperY = that.swiperY,//开始Y坐标
            touchSwiperMoveX = e.clientX,//滑动变化坐标
            touchSwipeMoveY = e.clientY,//滑动变化坐标
            //获取滑动角度
            angle = that.angle({ X: startSwiperX, Y: startSwiperY }, { X: touchSwiperMoveX, Y: touchSwipeMoveY });
            // 如果当前是向左边滑动并且是当前位置是在最好一张的情况就跳转到视频
            if (touchSwiperMoveX + 120 < startSwiperX && this.currentPage == this.imgUrls.length - 1) { //右滑
                this.isTouchMove = true
            }
        },
        // 滑动外层的branner 记录当前值
        touchstart(e){
            this.startX = e.clientX
            this.startY = e.clientY
        },
        touchmove(e){
            var that = this,
            startX = that.startX,//开始X坐标
            startY = that.startY,//开始Y坐标
            touchMoveX = e.clientX,//滑动变化坐标
            touchMoveY = e.clientY,//滑动变化坐标
            //获取滑动角度
            angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
            if (touchMoveX > startX+100) { //右滑
                let myVideo =  wx.createVideoContext('myVideo')
                myVideo.pause();
                that.isTouchMove = false
            }
        },
        angle: function (start, end) {
            var _X = end.X - start.X,
            _Y = end.Y - start.Y
            //返回角度 /Math.atan()返回数字的反正切值
            return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
        },
        // 获取当前滑动到那张图片
        bindchange(e){
           this.currentPage = e.mp.detail.current  
           this.isTouchMove = this.currentPage == this.imgUrls.length-1 ? true : false
           if(!this.isTouchMove){
                this.isPlay = false;
                let myVideo =  wx.createVideoContext('myVideo')
                myVideo.pause();
           }
        },
        showShopFn(){
            this.shopShow = true;
        },
        goOrder(){
            wx.navigateTo({
		        url: '/pages/order-detail/main'
		    })
        },
        buy(){
            this.shopShow = false;
            wx.navigateTo({
		        url: '/pages/order-detail/main'
		    })
        },
        shopcar(){
             this.shopShow = false;
        },
        goIndex(){
            wx.redirectTo({
                url: '/pages/index/main'
            })
        }
    },
    components: {
        cellItem,
        buyShop
	}
}
</script>
